<template>
  <view>
    <view class="u-page">
      <view class="name-card">
        <view>
          <view class="avatar" v-if="userInfo.avatar || avatarGot">
            <image
              :src="getFmtImage(userInfo.avatar)"
              mode="aspectFill"
              @click.stop.prevent="getUserProfile()"
            ></image>
          </view>
          <view class="avatar" v-else>
            <image
              src="/static/imgs/avatar.png"
              mode="aspectFill"
              @click.stop.prevent="getUserProfile()"
            ></image>
          </view>
        </view>
        <view class="detail">
          <view class="len1">
            <view class="name" v-if="userInfo.userName">{{
              userInfo.userName
            }}</view>
            <view class="name" v-else>游客</view>
          </view>
          <!-- <view class="rzInfo" @click.stop.prevent="doFaceRz()">
            <image
              :src="API_PREFIX + '/mobile/wxImages/mime/y.png'"
              mode="aspectFill"
              v-if="userInfo.rz"
            ></image>
            <image
              :src="API_PREFIX + '/mobile/wxImages/mime/w.png'"
              mode="aspectFill"
              v-else
            ></image>
          </view> -->
        </view>
        <view class="link-right" @click="detailPage()">
          <!-- <view class="qricon"><image src="/static/imgs/qr.png" mode=""></image></view>  -->
          <view class="right"
            ><u-icon name="arrow-right" color="#fff" size="28"></u-icon
          ></view>
        </view>

        <!-- 计数块 -->
        <view class="kuai">
          <view class="item">
            <view class="num">{{nums.diandan_num}}</view>
            <view class="zi">点单数</view>
          </view>
          <view class="item">
            <view class="num">{{nums.sign_num}}</view> <view class="zi">签到数</view></view
          >
          <view class="item">
            <view class="num">{{nums.xiadan_num}}</view> <view class="zi">下单数</view></view
          >
          <view class="item">
            <view class="num">{{nums.canyu_num}}</view> <view class="zi">参与活动数</view></view
          >
          <view class="item">
            <view class="num">{{nums.hours_num}}</view> <view class="zi">活动时长</view></view
          >
          <view class="item"></view>
        </view>
      </view>

      <!-- 功能块 -->
      <view class="gn">
        <view v-for="(item, index) in menus" :key="index" v-show="!item.hide">
          <u-cell 
            :icon="item.icon"
            size="large"
            :title="item.name"
            :isLink="true"
            @click="handleMenuButtonClick(item)"
        ></u-cell>
        </view>
        
        <!-- <view class="btn-leave"> 退出 </view> -->
      </view>

      <view class="version" @click="updateMp()">V:{{version}}</view>
    </view>
    <mytabbar></mytabbar>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import sceneMixins from "@/utils/sceneMixins";
import faceValidate from "./faceValidate.js";
import mytabbar from "@/components/tabbar/index.vue";
export default {
  options: { styleIsolation: "shared" },
  components: { mytabbar: mytabbar },
  mixins: [sceneMixins, faceValidate],
  computed: {
    ...mapState(["userInfo", "openId"]),
  },
  data() {
    return {
      API_PREFIX: this.API_PREFIX,
      avatarGot: false,
      menus: [],
      version: '1.1.4',
      nums: {
        canyu_num: '--',
        diandan_num: '--',
        hours_num: '--',
        sign_num: '--',
        xiadan_num: '--',
      },
    };
  },
  onLoad() {
    var vm = this;
    uni.showLoading({ title: "登录中" });
    vm.waitVariable("token").then(() => {
      uni.hideLoading();
      if (!vm.userInfo) {
        uni.redirectTo({
          url: "/pages/mine/register",
        });
      } else {
        vm.getNums();
        vm.getAndLoad('我的配置', '/wxAssets/wxJSON/mineIndex.json', function (res) {
          res.menus.forEach(n => {
            if (n.pemissionControl) {
              var pc = n.pemissionControl;
              var judge = vm.userInfo && pc[1].includes(vm.userInfo[pc[0]]);
              console.log(22222222222);
        				if (!judge) {
                console.log(11111);
        					n.hide = true;
        				}
            }
          })
          vm.menus = res.menus;
        })
      }
    });

  },
  filters: {
      serverFmt: function (v) {
          if (v.startsWith('/')) {
              return this.API_PREFIX + v;
          } else {
              return v;
          }
      }
  },
  methods: {
    ...mapMutations(["logout"]),

    getNums() {
      var vm = this;
      vm.getAndLoad(
        "获取个人数字们",
        "/api/miniapp/v1/user/myStat.jsp",
        function (res) {
          // console.log("🚀 ~ file: index.vue ~ line 107 ~ getNums ~ res", res);
          vm.nums=res.data
        }
      );
    },
    disLogin: function () {
      var vm = this;
      uni.showModal({
        title: "提示",
        content:
          vm.disLoginTip ||
          "是否确认注销账号，借此小程序将失去您的登录信息和个人信息。",
        showCancel: true,
        success: function (res3) {
          res3.confirm &&
            vm.getAndLoad(
              "注销",
              "/mobile/h5/covid19/apiRyzc/del.jsp?openId=" + vm.openId,
              function (res) {
                if (res.code == 0) {
                  uni.showModal({
                    title: "提示",
                    content: res.msg || "注销成功",
                    showCancel: false,
                    success: function (res2) {
                      vm.logout();
                      uni.reLaunch({
                        url: "/pages/index/index",
                      });
                      // uni.navigateBack();
                    },
                  });
                } else {
                  uni.$u.toast(res.msg || "注销失败");
                }
              }
            );
        },
      });
    },
    handleMenuButtonClick: function (eventHandler) {
      if (eventHandler.url) {
        uni.navigateTo({
          url: eventHandler.url,
        });
      }
    },
    detailPage: function () {
      uni.navigateTo({
        url: "/pages/mine/detail",
      });
    },
    updateMp: function () {
      var vm = this;
      uni.showLoading();
      if (wx.canIUse('getUpdateManager')) { //判断当前微信版本是否支持版本更新
        const updateManager = wx.getUpdateManager();
    
        updateManager.onCheckForUpdate(function(res) {
    
          if (res.hasUpdate) { // 请求完新版本信息的回调
    
            updateManager.onUpdateReady(function() {
              uni.hideLoading();
              uni.$u.toast('有新版本可以更新，即将更新');
              setTimeout(() => {
                updateManager.applyUpdate();
              }, 100)
            });
    
            updateManager.onUpdateFailed(function() {
              uni.hideLoading();
              wx.showModal({ // 新的版本下载失败
    
                title: '已经有新版本了哟~',
    
                content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
    
              })
    
            })
    
          } else {
            uni.hideLoading();
            uni.navigateTo({url: '/pages/shenbao/list?loadJSON=/wxAssets/wxJSON/更新日志/config.json'})
          }
        })
    
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.name-card {
  color: #fff;
  background: url("#{$APIPATH}/wxAssets/wxImages/grbj.png");
  height: 480rpx;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 60rpx;
  position: relative;
  .avatar {
    image {
      width: 122rpx;
      height: 122rpx;
      border-radius: 50%;
      border: 6rpx solid #ffffff;
    }
  }
  .link-right {
    display: flex;
    align-items: center;
    position: absolute;
    top: 91rpx;
    right: 58rpx;
    .qricon {
      image {
        width: 40rpx;
        height: 40rpx;
      }
      margin-right: 16rpx;
    }
  }
  .kuai {
    width: 670rpx;
    height: 200rpx;
    background: url("#{$APIPATH}/wxAssets/wxImages/kbg.png");
    background-size: 100% 100%;
    position: absolute;
    left: 40rpx;
    top: 224rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 220rpx;
      height: 102rpx;
      //   background-color: aquamarine;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .num {
        font-size: 30rpx;
        font-weight: bold;
        color: #4b4d4e;
      }
      .zi {
        font-size: 24rpx;
        color: #4b4d4e;
      }
    }
  }
  .avatar-open {
    width: 122rpx;
    height: 122rpx;
    border-radius: 50%;
    border: 6rpx solid #fff;
    overflow: hidden;
  }
  .detail {
    position: absolute;
    top: 104rpx;
    left: 224rpx;
    .len1 {
      display: flex;
      align-items: baseline;
      line-height: 72rpx;
      margin-top: -25rpx;
      .name {
        font-size: 36rpx;
        margin-right: 20rpx;
        color: #000000;
        font-weight: bold;
      }
      .age {
        font-size: 26rpx;
      }
    }
    .len-infos {
      .len {
        display: flex;
        font-size: 28rpx;
        line-height: 42rpx;
        .k {
          margin-right: 8rpx;
        }
      }
    }
    .rzInfo {
      image {
        width: 114rpx;
        height: 36rpx;
      }
    }
  }
}
.gn {
  width: 100vw;
  height: calc(100vh - 480rpx);
  background-color: #ffffff;
  /deep/ .u-line {
    display: none;
  }
}
.menus {
  background: #fff;
  margin: 10rpx 0;
  /deep/ .u-cell__title-text {
    margin-left: 20rpx;
  }
}
.btn-leave {
  width: 670rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  background-image: linear-gradient(0deg, #e6652f 0%, #ef9040 100%),
    linear-gradient(#078ff5, #078ff5);
  background-blend-mode: normal, normal;
  border-radius: 14rpx;
  margin: 0 auto;
  margin-top: 100rpx;
}
.version {
  color: #999999;
  position: absolute;
	bottom: calc(60px);
	bottom: calc(60px + constant(safe-area-inset-bottom));
	bottom: calc(60px + env(safe-area-inset-bottom));
  right: 10px;
  font-size: 24rpx;
}
</style>
